 <template>
  <div>
      <div style="margin-left: 0px;">
           <el-date-picker
            v-model="yearMonth"
            type="month"
            @change="changeMonth"
            placeholder="选择月">
            </el-date-picker>
      </div>
    <div id="myChart" style="width: 900px;height:500px;"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      xdata:[],
      yaddData:[],
       yupdateData:[],
       ydelData:[],
       chrome:[],
      yearMonth:'',
    }
  },
  created(){
       var date = new Date();
       this.yearMonth=date.getFullYear()+'-'+(date.getMonth()+1);
       this.loadData();
  },
  methods: {
    loadData(){
         var _this =this;
        this.$http.get("/api/cs/loginLog/LoginLogShowByMonth?yearMonth="+this.yearMonth).then((response) => {
                console.log(JSON.stringify(response)+"...111..")
                  _this.xdata=[];
                  _this.yaddData=[];
                  _this.yupdateData=[];
                  _this.ydelData=[];
                  _this.chrome=[];
                  var showData = response.data.data;
                  //循环
                //   showData.forEach(e => {
                //       _this.xdata.push(e.monthDay);
                //       _this.yaddData.push(e.admin);
                //        _this.yupdateData.push(e.client);
                //        _this.ydelData.push(e.firefox);
                //        _this.chrome.push(e.chrome);
                //   });
                for(var i in showData){
                    _this.xdata.push(showData[i].monthDay);
                    _this.yaddData.push(showData[i].manager);
                    _this.yupdateData.push(showData[i].client);
                    _this.ydelData.push(showData[i].firefox);
                    _this.chrome.push(showData[i].chrome);
                }
                console.log(this.ydelData);
                  this.drawLine();
              });
    },
    changeMonth(v){
       //console.log(v);
        var year=   v.getFullYear();
        var month=  v.getMonth()+1;
     //  console.log(year+"..444.."+month);
       this.yearMonth=year+'-'+month;
        this.loadData();
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
                    let myChart = this.$echarts.init(document.getElementById('myChart'))
                    // 绘制图表
                    myChart.setOption({
                        title: {
                    text: '网站管理员登录情况展示',
                    subtext: '完全真实的数据'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['管理员登录次数','客户登录次数','使用谷歌次数','使用火狐登录']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: {readOnly: false},
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.xdata
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '管理员登录次数',
                        type: 'line',
                        data: this.yaddData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                     {
                        name: '使用谷歌次数',
                        type: 'line',
                        data: this.chrome,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '客户登录次数',
                        type: 'line',
                        data: this.yupdateData,
                        markPoint: {
                            data: [
                                {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        position: 'start',
                                        formatter: '最大值'
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }]
                            ]
                        }
                    },{
                        name: '使用火狐登录',
                        type: 'line',
                        data: this.ydelData,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
        });
    }
  }
}
</script>
<style>
  .aaa{margin-left: 0px;}
</style>